 /*
 * @description: app开屏广告编辑增加
 * @Author: along
 * @Date: 2020-09-17
 * @Last Modified by: along
 * @Last Modified time: 2020-09-17
 */
<template>
    <div class="container banner-add-wrap">
        <el-form
            v-if="init"
            ref="mainform"
            :model="formData"
            label-position="right"
            status-icon
            :rules="formRule"
            label-width="110px"
            :disabled="false">
            <div class="form-unit">
                <div class="form-title">开屏广告设置</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="APP端:"
                >
                    <el-checkbox
                        v-model="checked"
                        :disabled="true"
                    >APP</el-checkbox>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    prop="image_url"
                    label="开屏广告:"
                >
                    <el-upload
                        :show-file-list="false"
                        :http-request="e=> {fnUploadImageOfCustomerLogo(e)}"
                        accept="image/*"
                        class="upload-demo"
                        drag
                        action="https://jsonplaceholder.typicode.com/posts/">
                        <img
                            v-if="formData.image_url"
                            :src="formData.image_url"
                            class="avatar">
                        <i
                            class="el-icon-upload"
                            v-if="!formData.image_url"/>
                        <div
                            class="el-upload__text"
                            v-if="!formData.image_url">将文件拖到此处，或<em>点击上传</em></div>
                        <div
                            class="el-upload__tip"
                            slot="tip">
                            *请上传1080*1920px的图片,图片大小在1M以内,支持jpg、png、gif格式
                    </div></el-upload>
                    <el-button
                        type="text"
                        size="medium"
                        style="position: absolute; left: 380px;bottom: 48px"
                        @click="$refs.imageSizeDemo.show()"
                    >
                        查看示例
                    </el-button>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="停留时间:"
                >
                    <el-select
                        v-model="formData.advertise_time"
                        clearable
                        filterable
                        style="width: 440px"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in timeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="跳转链接:"
                >
                    <app-action
                        style="width: 440px;margin-bottom: 22px"
                        v-model="formData.app_action"
                        size="small"
                        ref="appAction"
                    />
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="投放时间:"
                    :style="{marginTop: '-22px'}"
                >
                    <el-select
                        v-model="formData.serving_type"
                        clearable
                        style="width: 440px"
                        filterable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in dateList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="展示时间:"
                    prop="start_time"
                >
                    <el-date-picker
                        v-model="dateTimeRange"
                        size="medium"
                        clearable
                        type="datetimerange"
                        range-separator="至"
                        style="width: 440px"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        value-format="timestamp"
                    />
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label="上架状态:"
                >
                    <el-switch
                        v-model="formData.status"
                        active-text="上架"
                        inactive-text="下架"
                        :active-value="1"
                        :inactive-value="0"
                    />
                </el-form-item>
            </div>
            <div class="form-unit">
                <div class="operate-baar">
                    <el-button
                        size="medium"
                        @click="fnReset()"
                        :style="{width: '120px', marginRight: '30px'}"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="fnSave('mainform')"
                        :style="{width: '120px'}"
                    >
                        保存
                    </el-button>
                </div>
            </div>
        </el-form>
        <image-size-demo
            ref="imageSizeDemo"
            img-src=""
        />
    </div>
</template>

<script>
import appAction from '@/components/common/app-action';
import { back } from '@/mixin/back';
import ImageSizeDemo from "@/components/invite-friends/image-size-demo";
export default {
    mixins: [back],
    components: {
        ImageSizeDemo,
        appAction
    },
    data() {
        return {
            checked: true,
            advertise_no: '',
            timeList: [{value: 3, label: '3s'},{value: 4, label: '4s'},{value: 5, label: '5s'},{value: 6, label: '6s'},{value: 7, label: '7s'},{value: 8, label: '8s'},{value: 9, label: '9s'}],
            dateList: [{value: 0, label: '每次重启应用'},{value: 1, label: '每日一次'}],
            formData: {
                image_url: '',
                advertise_time: 3,
                app_action: {},
                serving_type: 1,
                start_time: '',
                end_time: '',
                status: 1
            },
            dateTimeRange: [],
            formRule: {
                image_url: [
                    { required: true, message: '请上传开屏广告', trigger: 'change' }
                ],
                start_time: [
                    { required: true, message: '请选择展示时间', trigger: 'change' }
                ]
            },
            init: false
        };
    },
    watch: {
        dateTimeRange(value) {
            this.formData.start_time = value ? value[0] / 1000 : '';
            this.formData.end_time = value ? value[1] / 1000 : '';
        },
    },
    computed: {
    },
    mounted () {
        let query = this.$route.query;

        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '开屏广告设置'}]);
        this.authResult = this.$route.meta.authResult;
        this.advertise_no = query.advertise_no;

        if (!this.advertise_no) {//新建
            this.init = true;
        } else {//编辑
            this.getInfo();
        }
    },
    methods: {
        /**
         * @description 获取广告数据回填
         */
        getInfo () {
            this.$post('/student/app_advertise%5Cget', {
                advertise_no: this.advertise_no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        image_url: resp.data.image_url,
                        advertise_time: resp.data.advertise_time,
                        serving_type: resp.data.serving_type,
                        app_action: resp.data.app_action,
                        status: resp.data.status
                    };

                    this.dateTimeRange = [resp.data.start_time * 1000, resp.data.end_time * 1000];
                    this.$set(this.formData, 'app_action',resp.data.app_action);
                    this.init = true;
                    if(resp.data.app_action === '') resp.data.app_action = {};
                    setTimeout(() => {
                        this.$refs.appAction.setValue(resp.data.app_action);
                    }, 300);
                }
            });
        },

        /**
         * @description 保存
         */
        fnSave (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('formData', this.formData);
                    if(!this.advertise_no) {//新建
                        this.$post('/student/app_advertise%5Cadd',{
                            image_url: this.formData.image_url,
                            advertise_time: this.formData.advertise_time,
                            app_action: JSON.stringify(this.formData.app_action),
                            serving_type: this.formData.serving_type,
                            start_time: this.formData.start_time,
                            end_time: this.formData.end_time,
                            status: this.formData.status
                        },resp => {
                            if(resp.code == 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'appSide'
                                    });
                                },500);
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    }

                    if(this.advertise_no) {//编辑
                        this.$post('/student/app_advertise%5Cset',{
                            advertise_no: this.advertise_no,
                            image_url: this.formData.image_url,
                            advertise_time: this.formData.advertise_time,
                            app_action: JSON.stringify(this.formData.app_action),
                            serving_type: this.formData.serving_type,
                            start_time: this.formData.start_time,
                            end_time: this.formData.end_time,
                            status: this.formData.status
                        },resp => {
                            if(resp.code == 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '保存成功',
                                    type: 'success',
                                    duration: 2000
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'appSide'
                                    });
                                },500);
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: resp.msg,
                                    type: 'warning',
                                    duration: 2000
                                });
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },

        /**
         * @description 获取app_action
         */
        getAction (action) {
            let appAction = JSON.parse(action);

            console.log('appAction', appAction);

            this.formData.app_action = appAction;
        },

        /**
         * @description 图片上传
         */
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.formData.image_url = resp.data.url;
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },

        /**
         * @description 取消
         */
        fnReset(){
            this.$confirm('取消后你修改的内容将不会进行保存,是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$router.push({
                    name: 'appSide'
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .avatar{
        width: 100%;
        height: 100%;;
    }
    .margin-top{
        margin-top: 15px;
    }
    .banner-add-wrap {
      background: #fff;
      margin: 15px;
      margin-bottom: 0;
      padding: 30px;
      overflow: auto;
    }
    .form-unit {
      margin-bottom: 40px;
    }
    .form-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
      padding: 0 10px;
      border-left: 2px solid #1890ff;
      margin-bottom: 20px;
    }
    .task-input {
      width: 435px !important;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }

    .operate-baar {
      width: 100%;
      text-align: center;
      margin-top: 168px;
    }
    .el-select-title {
        display: inline-block;
        color: #909399;
        background: #F5F7FA;
        padding: 0 18px;
        border: 1px solid #DCDFE6;
        border-radius: 4px 0 0 4px;
        border-right: none;
        height: 32px;
        white-space: nowrap;
    }
    .el-icon-circle-plus-outline {
        font-size: 20px;
        line-height: 32px;
        align-items: center;
        color: #20a0ff;
        cursor: pointer;
    }
    .school-list {
        max-height: 310px;
        overflow: auto;
        .empty {
            text-align: center;
            color: #7e8993;
        }
    }
    .submit-btn {
        margin: 30px auto 0;
        display: block;
    }
    .el-tag-school {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-bottom: 10px;
        .el-tag{
            margin-right: 10px;
            margin-bottom: 10px;
            height: 32px;
            display: flex;
            align-items: center;
        }
    }
</style>
<style lang="less">
.el-form .form-unit .row-flex .el-form-item__content .el-input__inner::-webkit-input-placeholder{
    color: #606266;
}
.banner-add-wrap {
    .el-checkbox-button {
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 0;
    }
    .el-checkbox-button:first-child .el-checkbox-button__inner {
      border-radius: 2;
    }
    .el-checkbox-button__inner {
      border-left: 1px solid #dcdfe6;
      font-size: 12px;
      font-weight: 400;
      color: rgba(126, 137, 147, 1);
      border-radius: 2px;
      position: relative;
    }
    .el-checkbox-button.is-checked .el-checkbox-button__inner {
      background-color: #fff;
      border: 1px solid rgba(32, 160, 255, 1);
      color: #20a0ff;
      box-shadow: none;
      overflow: hidden;
      &::after {
        content: " ";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 18px;
        background-image: url(//cdn.zsdx.cn/admin/images/common/checked.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
    }
    .el-input__inner {
        background: #fbfbfb;
    }
  }
</style>
